import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';

export default class FlexDemo extends Component {
  render() {
    return (
      <View style={{flex: 1, width: '100%', textAlign: 'center'}}>
        <Text style={myStyle.text}>Flex</Text>
        <View style={{flex: 1}}>
          <View style={{flex: 1, backgroundColor: 'powderblue'}}/>
          <View style={{flex: 2, backgroundColor: 'skyblue'}} />
          <View style={{flex: 3, backgroundColor: 'steelblue'}} />
        </View>

        <Text style={myStyle.text}>Flex Direction</Text>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <View style={{flex: 1, backgroundColor: 'powderblue'}}/>
          <View style={{flex: 1, backgroundColor: 'skyblue'}} />
          <View style={{flex: 1, backgroundColor: 'steelblue'}} />
        </View>

        <Text style={myStyle.text}>Justify Content (flex-start、center、flex-end、space-around、space-between、space-evenly)</Text>
        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-around'}}>
          <View style={{width: 50, backgroundColor: 'powderblue'}}/>
          <View style={{width: 50, backgroundColor: 'skyblue'}} />
          <View style={{width: 50, backgroundColor: 'steelblue'}} />
        </View>

        <Text style={myStyle.text}>Align Items (flex-start、center、flex-end、stretch)</Text>
        <View style={{flex: 1, alignItems: 'stretch'}}>
          <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
          <View style={{height: 50, backgroundColor: 'skyblue'}} />
          <View style={{height: 50, backgroundColor: 'steelblue'}} />
        </View>
      </View>
    );
  }
}

const myStyle = StyleSheet.create({
  text: {
    textAlign: 'center',
  }
});